<template>
  <div class="upcoming">
    <div class="movie-container">
      <ul>
        <li
          class="film-pic"
          v-for="(item, index) in subjects_coming"
          :key="index"
          v-show="index < maxNum"
        >
          <a @click="particulars(item.id,item.original_title)">
            <img class="movieImg" :src="item.images.large" alt="海报">
            <div class="title_name">
              <h5>{{item.original_title}}</h5>
              <!--数组长度为5，共5次循环显示5颗星星-->
              <div class="stars">
                <!-- 全黄星星 -->
                <img
                  class="stars_img"
                  src="/static/images/star_fill_whole.png"
                  v-if="item.rating.average>=index+1"
                >
                <!-- 半黄星星 -->
                <img
                  class="stars_img"
                  src="/static/images/star_fill_half.png"
                  v-if="item.rating.average>=index && item.rating.average%10!=0"
                >
                <!-- 全灰星星 -->
                <img class="stars_img" src="/static/images/star_fill_none.png" v-else>
                <span class="stars_sp" v-if="item.rating.average==0">暂无评分</span>
                <span class="stars_sp" v-else>{{item.rating.average}}</span>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      maxNum: 8
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["subjects_coming"])
  },
  methods: {
    moive_upcoming() {
      this.$store
        .dispatch("coming_soon")
        .then(data => {
          console.log("接口数据：" + JSON.stringify(data.subjects[0].id));
        })
        .catch(error => {
          console.log("接口请求失败：" + error);
        });
    },
    particulars(id, title) {
      wx.navigateTo({
        url: "/pages/details/main?id=" + id + "&title=" + title
      });
    }
  },
  created() {
    this.moive_upcoming();
  },
  mounted() {}
};
</script>
<style scoped>
.movie-container {
  height: 380rpx;
  padding: 30rpx 20rpx 0rpx 20rpx;
}
.movie-container ul {
  display: flex;
}
.film-pic {
  flex: 0 0 23%;
  margin-right: 20rpx;
  height: 260rpx;
}
.film-pic img {
  width: 100%;
  height: 260rpx;
}
/* 影片名称 */
.title_name h5 {
  width: 170rpx;
  font-size: 24rpx;
  color: #000000;
  font-weight: bold;
  margin: 10rpx 0 5rpx 0;
  overflow: hidden; /*内容超出后隐藏*/
  text-overflow: ellipsis; /* 超出内容显示为省略号*/
  white-space: nowrap; /*文本不进行换行*/
}
.stars {
  height: 40rpx;
  display: flex;
  align-items: center;
}
.stars_sp {
  font-size: 20rpx;
  margin-left: 10rpx;
}
.stars_img {
  width: 25rpx !important;
  height: 25rpx !important;
}
</style>